<template>
    <n-config-provider :theme="theme">
        <n-layout has-sider>
            <n-layout-sider content-style="padding: 2px;" bordered collapse-mode="width" :collapsed-width="64" :width="240"
                :collapsed="collapsed" show-trigger @collapse="collapsed = true" @expand="collapsed = false" class="left">
                <mainMenu />
                <div class="switchTheme">
                    <n-icon size="30" @click="switchTheme()">
                        <Sunny />
                    </n-icon>
                </div>
            </n-layout-sider>
            <n-layout>
                <n-layout-header></n-layout-header>
                <n-layout-content content-style="padding: 2px;">
                    <router-view :key="$route.fullPath" />
                </n-layout-content>
                <n-layout-footer></n-layout-footer>
            </n-layout>
        </n-layout>
    </n-config-provider>
</template>

<script lang="ts" setup>
import { ref } from "vue"
import mainMenu from './components/mainMenu.vue'
import { NLayout, NLayoutSider, NLayoutHeader, NLayoutContent, NLayoutFooter, darkTheme, NIcon, NConfigProvider } from 'naive-ui'
import type { GlobalTheme } from 'naive-ui'
import { SunnyOutline as Sunny } from '@vicons/ionicons5'

const collapsed = ref(false)

const theme = ref<GlobalTheme | null>(darkTheme)

function switchTheme() {
    if (theme.value === null) {
        theme.value = darkTheme;
    } else {
        theme.value = null;
    }
}

</script>

<style>
.left {
    height: 100vh;
}

.switchTheme {
    position: absolute;
    bottom: 0;
    left: 0;
    padding-left: 10%;
    padding-bottom: 10%;
}
</style>
